<template>
  <div>
    <h3>{{ $t("business.common.service") }}</h3>
    <el-alert v-if="svrPorts.length === 0" type="info">
      <template v-slot:title>
        <div>
          <i class="el-icon-info" />
          <span>
            {{
              $t("business.network.service_detail_help", [resourceType, name])
            }}</span
          >
        </div>
      </template>
    </el-alert>
    <complex-table v-if="svrPorts.length !== 0" :data="svrPorts">
      <el-table-column :label="$t('business.workload.name')" prop="name" />
      <el-table-column
        :label="$t('business.workload.protocol')"
        prop="protocol"
      />
      <el-table-column :label="$t('business.workload.port')" prop="port" />
      <el-table-column
        :label="$t('business.workload.node_port')"
        prop="nodePort"
      />
      <el-table-column
        :label="$t('business.workload.container_port')"
        prop="targetPort"
      />
    </complex-table>
  </div>
</template>

<script setup lang="ts">
import ComplexTable from "@/views/domain/kubeHud/views/components/complex-table/index.vue";
import { Service, ServicePort, useK8SApi } from "../../../api/k8s";
import { onMounted, ref } from "vue";
import {
  hasNsPodsListPermission,
  hasNsSvrsListPermission
} from "../../../utils/permission";
// import { listServicesWithNs } from "@/api/services";
// import { checkPermissions } from "@/utils/permission";

const { serviceRepo } = useK8SApi();

type Prop = {
  cluster: string;
  namespace: string;
  name: string;
  resourceType: string;
};
const props = defineProps<Prop>();
const loading = ref(false);
const svrPorts = ref<ServicePort[]>([]);

const loadServiceList = async () => {
  if (!(await hasNsSvrsListPermission())) {
    return;
  }
  loading.value = true;
  serviceRepo
    .getServiceDetail({
      namespace: props.namespace,
      srcName: props.name
    })
    .then(res => {
      if (!res.ok) return;
      svrPorts.value = res.spec?.ports ?? [];
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  loadServiceList();
});
</script>

<style scoped></style>
